<script setup>
import dayjs from 'dayjs'
import { SelfEchartOptions } from './index'
import RankingDataCard from './components/RankingDataCard/index.vue'
import WaitingNumCard from './components/WaitingNumCard/index.vue'
// 角色编号id 1 = 超级管理员，2=一级管理员，5=门岗管理员
// const currentRoleId = userStore.userInfo.id
// console.log('=====11111======', currentRoleId)
const currentRoleId = 5
// 获取当前时间
const getCurrentTimeFun = () => {
    const now = dayjs()
    const formattedDateTime = now.format('YYYY-MM-DD hh:mm:ss')
    return formattedDateTime
}
const isShowEcharts = ref(true)
// 采购车辆预约数数据
const todayCgAppointObj = reactive({
    titleStr: '今日采购车辆预约数',
    updateTime: getCurrentTimeFun(),
    totalAppointNum: 400,
    dataEcharts: [
        { value: 104, name: '未核验数量' },
        { value: 735, name: '等待中数量' },
        { value: 580, name: '已进厂数量' }
    ]
})
// 今日销售车辆预约数数据
const todayXsAppointObj = reactive({
    titleStr: '今日销售车辆预约数',
    updateTime: getCurrentTimeFun(),
    totalAppointNum: 800,
    dataEcharts: [
        { value: 204, name: '未核验数量' },
        { value: 635, name: '等待中数量' },
        { value: 480, name: '已进厂数量' }
    ]
})
// 获取饼图数据并赋值 type = '1'采购 | '2'销售
const initPieDataFun = (type = 1) => {
    if (type === 1) {
        const initEchart = new SelfEchartOptions(todayCgAppointObj)
        // 饼图配置选项
        optionForTodayCg.value = initEchart.initEchartsOptions()
        return
    }
    if (type === 2) {
        const initEchart = new SelfEchartOptions(todayXsAppointObj)
        // 饼图配置选项
        optionForTodayXs.value = initEchart.initEchartsOptions()
    }
}
// 采购车辆预约赋值
const optionForTodayCg = ref({})
initPieDataFun(1)
// 销售车辆预约数赋值
const optionForTodayXs = ref({})
initPieDataFun(2)

// 获取表格数据
const getListData = async () => {
    // const params = {
    //   pageSize: pagination.pageSize,
    //   pageNum: pagination.currentPage
    // }
    // const [err, res] = await getPageCondition(params)
    // if (err) {
    //   return
    // }
    // const { records = [], total = 0 } = res
    // pagination.total = total
    // tableData.value = records
}

// 等待数据
const waitingList = ref([
    {
        id: 1,
        vehicleNo: '粤C123456'
    },
    {
        id: 2,
        vehicleNo: '粤C123457'
    },
    {
        id: 3,
        vehicleNo: '粤C123458'
    },
    {
        id: 4,
        vehicleNo: '粤C123459'
    },
    {
        id: 5,
        vehicleNo: '粤C123410'
    },
    {
        id: 6,
        vehicleNo: '粤C123411'
    },
    {
        id: 7,
        vehicleNo: '粤C123412'
    },
    {
        id: 8,
        vehicleNo: '粤C123458'
    },
    {
        id: 9,
        vehicleNo: '粤C123459'
    },
    {
        id: 10,
        vehicleNo: '粤C123410'
    },
    {
        id: 11,
        vehicleNo: '粤C123411'
    },
    {
        id: 12,
        vehicleNo: '粤C123412'
    }
])
</script>
<template>
    <div class="appoint-box">
        <div class="title-box" v-if="currentRoleId == 5">
            <span class="tit-str">今日预约数据</span>
            <span class="opera-set" @click="isShowEcharts = !isShowEcharts">{{ isShowEcharts ? '收起' : '展开' }}</span>
        </div>
        <div class="chart-box" v-show="isShowEcharts">
            <div>
                <v-chart class="chart" :option="optionForTodayCg" :update-options="{ notMerge: true }" autoresize />
            </div>
            <div>
                <v-chart class="chart" :option="optionForTodayXs" :update-options="{ notMerge: true }" autoresize />
            </div>
        </div>
        <div v-if="currentRoleId === 5">
            <div class="title-box">
                <span class="tit-str">排号实时数据</span>
            </div>
            <div class="tab-box">
                <div class="flex-row-2">
                    <RankingDataCard titleStr="请入厂" licenseNumber="粤C123456"></RankingDataCard>
                    <RankingDataCard linearGradient="linear-gradient(to right, rgba(214, 226, 250), rgba(252, 253, 254, 1))" textColor="rgba(44,107,229,1)" titleStr="即将入厂" licenseNumber="粤C123456"></RankingDataCard>
                </div>
                <div>
                    <div class="wait-tit">等候中</div>
                    <div class="wait-num">
                        <WaitingNumCard v-for="item in waitingList" :key="item.id" :vehicleNo="item.vehicleNo"></WaitingNumCard>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.appoint-box {
    width: 100%;
    min-height: 100%;
    padding: 16px;
    box-sizing: border-box;
    background: #f8f8f8;
    .title-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 6px 0px;
        box-sizing: border-box;
        .tit-str {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #333;
            font-size: 20px;
            font-weight: 600;
            &::before {
                display: inline-block;
                content: '';
                width: 4px;
                height: 20px;
                background-color: #2261e0;
                margin-right: 8px;
            }
        }
        .opera-set {
            margin-left: 16px;
            color: #2c6be5;
            font-size: 15px;
            cursor: pointer;
        }
    }
    .chart-box {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 380px;
        justify-content: space-between;
        div {
            height: 100%;
            width: calc(50% - 10px);
        }
        .chart {
            height: 100%;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            background: #fff;
        }
    }
    .tab-box {
        margin-top: 12px;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
    }
    .flex-row-2 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        > div {
            width: calc(50% - 10px);
        }
    }
    .wait-tit {
        font-size: 22px;
        color: #333;
        font-weight: 600;
        padding: 8px 0px;
        box-sizing: border-box;
    }
    .wait-num {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 15px;
    }
}
</style>
